<template>
  <div class="pt-20">
    <div class="w100 bgff br-20">
        <div class="w100 h-40 br-10 rows rowsm">
            <div class="rowsc rowsm br-10 h100" style="width: 25%;" @click="active = 0,getList()" :style="active == 0 ? 'background-color: #E33636;color: #fff;' : 'background-color: #fff;color: #888;'">学院排行</div>
            <div class="rowsc rowsm br-10 h100" style="width: 25%;" @click="active = 1,getList()" :style="active == 1 ? 'background-color: #E33636;color: #fff;' : 'background-color: #fff;color: #888;'">专业排行</div>
            <div class="rowsc rowsm br-10 h100" style="width: 25%;" @click="active = 2,getList()" :style="active == 2 ? 'background-color: #E33636;color: #fff;' : 'background-color: #fff;color: #888;'">年级排行</div>
            <div class="rowsc rowsm br-10 h100" style="width: 25%;" @click="active = 3,getList()" :style="active == 3 ? 'background-color: #E33636;color: #fff;' : 'background-color: #fff;color: #888;'">班级排行</div>
        </div>

        <!-- <div class="w100 h-80 rowsa rowsm">
            <div class="w-150 h-30 br-15 rowsc rowsm" :style="active2 == 0 ? 'border: 1px solid #E33636;color: #E33636' : 'background-color: #F7F7F7;color:#333;'" @click="active2 = 0,getList()">全部</div>
            <div class="w-150 h-30 br-15 rowsc rowsm" :style="active2 == 1 ? 'border: 1px solid #E33636;color: #E33636' : 'background-color: #F7F7F7;color:#333;'" @click="active2 = 1,getList()">近一个月</div>
            <div class="w-150 h-30 br-15 rowsc rowsm" :style="active2 == 2 ? 'border: 1px solid #E33636;color: #E33636' : 'background-color: #F7F7F7;color:#333;'" @click="active2 = 2,getList()">近一个学期</div>
            <div class="w-150 h-30 br-15 rowsc rowsm" :style="active2 == 3 ? 'border: 1px solid #E33636;color: #E33636' : 'background-color: #F7F7F7;color:#333;'" @click="active2 = 3,getList()">近一年</div>
        </div> -->

        <div class="pl-30 pr-30 w100 mt-16 ">
            <div class="w100 h-80 br-20 pl-16 pr-16 rowsb rowsm mb-16" style="background: linear-gradient(to right,rgba(227, 54, 54, .1),rgba(255, 255, 255, .1));">
                <div class="rows rowsm">
                    <img src="../../../static/img/icon_zf.png" class="w-30 h-30 mr-12" alt="">
                    <div class="fs-16 fw-b col333">总分排行</div>
                </div>
                <div class="fs-16 fw-b" style="color: #E33636;">{{data.zfph}}</div>
            </div>
           

            <div class="w100 h-80 br-20 pl-16 pr-16 rowsb rowsm mb-16" style="background: linear-gradient(to right,rgba(227, 54, 54, .1),rgba(255, 255, 255, .1));">
                <div class="rows rowsm">
                    <img src="../../../static/img/icon_jf.png" class="w-30 h-30 mr-12" alt="">
                    <div class="fs-16 fw-b col333">实践成绩排行</div>
                </div>
                <div class="fs-16 fw-b" style="color: #E33636;">{{data.jfph}}</div>
            </div>
            <div class="w100 h-80 br-20 pl-16 pr-16 rowsb rowsm mb-16" style="background: linear-gradient(to right,rgba(227, 54, 54, .1),rgba(255, 255, 255, .1));">
                <div class="rows rowsm">
                    <img src="../../../static/img/icon_ph.png" class="w-30 h-30 mr-12" alt="">
                    <div class="fs-16 fw-b col333">理论成绩排行</div>
                </div>
                <div class="fs-16 fw-b" style="color: #E33636;">{{data.llph}}</div>
            </div>
          
        </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
        active:0,
        active2:0, 
        data:{}
    };
  },
  watch: {},
  computed: {},
  methods: {
    getList(){
        let data = {
          type:this.active == 0 ? 'xx' : this.active == 1 ? 'zy' : this.active == 2 ? 'nj' : 'bj'
        }
        if(this.active2 != 0){
          const today = new Date()
          data.stopTime = `${today.getFullYear()}-${+today.getMonth() + 1}-${today.getDate()}`
          if(this.active2 == 1) {
            const date = new Date(today.getTime() - 2592000000)
            data.startTime = `${date.getFullYear()}-${+date.getMonth() + 1}-${date.getDate()}`
          }
          if(this.active2 == 2) {
            const date = new Date(today.getTime() - 15552000000)
            data.startTime = `${date.getFullYear()}-${+date.getMonth() + 1}-${date.getDate()}`
          }
          if(this.active2 == 3) {
            const date = new Date(today.getTime() - 31104000000)
            data.startTime = `${date.getFullYear()}-${+date.getMonth() + 1}-${date.getDate()}`
          }
        }

        this.$axios.post('prouser/listPhbUser',{...data}).then(res => {
            if(res.data.code != 200) return this.$notify({
                title: '提示',
                message: res.data.msg
            });
            let {data} = res.data
            this.data = data

        })
    }
  },
  created() {
    this.getList()
  },
  mounted() {}
};
</script>
<style lang="scss" scoped>
</style>